<template>
  <div class="app-container">
    <el-row class="row bg-white">
      <el-form class="top" label-position="left" label-width="150px">
        <el-form-item label="机构类型" prop="userType">
          <el-select clearable class="filter-item" size="small" v-model="userForm.userType" placeholder="机构类型">
            <el-option v-for="item in userTypeOptions" :key="item.key" :label="item.text" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form v-if="userForm.userType==1" class="user-form" :validate-on-rule-change="false"  :model="userForm" :rules="userRules" ref="userForm" label-position="left" label-width="150px">
        <span class="title">企业资质信息</span>
        <hr>
        <el-form-item label="个体工商户名称" prop="company_name">
          <el-input type="text"  :inline-message="true" size="small" v-model="userForm.company_name" placeholder="请输入个体工商户名称"></el-input><br>
          <!--<label class="label">*主体名称需严格按照证件返回，在注册确认后不可更改。避免付款后因主体原因导致认证失败，请详细查阅主体不可更改情况</label>-->
        </el-form-item>
        <el-form-item label="工商营业执照" prop="company_name">
          <label class="label">请上传最新的营业执照。</label>
          <el-input type="hidden" v-model="userForm.license"></el-input>
          <el-upload
            class="attach-uploader"
            action=""
            ref="upload"
            :show-file-list="false"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            :before-upload="beforeUpload"
            :http-request="handleUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="attach">
            <i v-else class="el-icon-plus attach-uploader-icon"></i>
          </el-upload>
          <div style="width: 80%;display: inline-block">格式要求：原件照片、扫描件，支持.jpg .jpeg .bmp .gif .png格式照片，大小不超过5M。</div>
        </el-form-item>
        <span class="title">对公账户信息</span>
        <hr>
        <el-form-item class="el-form-item-user"  label="开户名称" prop="bank_accout">
          <el-input type="text"  size="small" v-model="userForm.bank_accout" placeholder="请输入开户名称"></el-input><br>
          <!--<label v-if="labelShow" class="label">*对公账户需跟主体证件上的机构名称保持一致，对公账户填写指引若个体工商户无对公账户，可填写与营业执照上法人一致的个人银行卡号</label>-->
        </el-form-item>
        <el-form-item class="el-form-item-user"  label="开户银行" prop="bank_name">
          <el-input type="text"  size="small" v-model="userForm.bank_name" placeholder="请输入开户银行"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="对公银行账号" prop="bank_card">
          <el-input type="text"  size="small" v-model="userForm.bank_card" placeholder="请输入对公银行账号"></el-input><br>
        </el-form-item>
        <span class="title">认证联系人信息</span>
        <hr>
        <el-form-item class="el-form-item-user" label="联系人姓名" prop="name">
          <el-input type="text"  size="small" v-model="userForm.bank_accout" placeholder="请输入联系人姓名"></el-input><br>
          <!--<label v-if="labelShow"  class="label">个体工商户的该人员须为法人本人，且与申请公函的联系人一致，否则审核将不被通过</label>-->
        </el-form-item>
        <el-form-item class="el-form-item-user" label="联系人电话" prop="phone">
          <el-input type="text"  size="small"  v-model="userForm.phone" placeholder="请输入手机号"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="联系人身份证号码" prop="idcard">
          <el-input type="text"  size="small" v-model="userForm.idcard"  placeholder="联系人身份证号码"></el-input><br>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" class="green-btn" @click="handleRegister">注册</el-button>
        </el-form-item>
      </el-form>
      <el-form v-else-if="userForm.userType==2" class="user-form" :validate-on-rule-change="false"  :model="userForm" :rules="userRules" ref="userForm" label-position="left" label-width="150px">
        <span class="title">银行账户信息</span>
        <hr>
        <el-form-item class="el-form-item-user"  label="开户银行" prop="bank_name">
          <el-input type="text"  size="small" v-model="userForm.bank_name" placeholder="请输入开户银行"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="对公银行账号" prop="bank_card">
          <el-input type="text"  size="small" v-model="userForm.bank_card" placeholder="请输入对公银行账号"></el-input><br>
        </el-form-item>
        <span class="title">联系人信息</span>
        <hr>
        <el-form-item class="el-form-item-user" label="联系人姓名" prop="name">
          <el-input type="text"  size="small" v-model="userForm.bank_accout" placeholder="请输入联系人姓名"></el-input><br>
          <!--<label v-if="labelShow"  class="label">个体工商户的该人员须为法人本人，且与申请公函的联系人一致，否则审核将不被通过</label>-->
        </el-form-item>
        <el-form-item class="el-form-item-user" label="联系人电话" prop="phone">
          <el-input type="text"  size="small" placeholder="请输入手机号" v-model="userForm.phone"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="联系人身份证号码" prop="idcard">
          <el-input type="text"  size="small" v-model="userForm.idcard"  placeholder="联系人身份证号码"></el-input><br>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" class="green-btn" @click="handleRegister">注册</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { validateMobile } from '@/utils/validate'
const userTypeOptions = [
  { key: 1, text: '企业' },
  { key: 2, text: '个人' }
]
export default {
  name: 'login',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validateMobile(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      userTypeOptions,
      userForm: {
        company_name: '',
        userType: 1,
        bank_accout: '',
        bank_name: '',
        bank_card: '',
        name: '',
        phone: '',
        code: '',
        idcard: ''
      },
      userRules: {
        company_name: [{ required: true, message: '请输入个体工商户名称', trigger: 'blur' }],
        bank_accout: [{ required: true, message: '请输入开户名称', trigger: 'blur' }],
        bank_name: [{ required: true, message: '请输入开户银行名称', trigger: 'blur' }],
        bank_card: [{ required: true, message: '请输入对公银行账号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', validator: validatePhone }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        idcard: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }]
      },
      labelShow: true,
      fileList: [],
      loading: false,
      showDialog: false,
      show: true,
      count: '',
      timer: null,
      second: 60
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const islt5M = file.size / 1024 / 1024 < 5
      if (!islt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
    },
    handleUpload(file, fileList) {
      alert('upload')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleRegister() {
      this.$refs.userForm.validate(valid => {
        if (valid) {
          alert('注册成功')
          // this.loading = true
          // this.$router.push({ path: '/' })
          // this.$store.dispatch('Login', this.loginForm).then(() => {
          //   this.loading = false
          //   this.$router.push({ path: '/' })
          // }).catch(() => {
          //   this.loading = false
          // })
        } else {
          this.labelShow = false
        }
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$router.push({ path: '/' })
          // this.$store.dispatch('Login', this.loginForm).then(() => {
          //   this.loading = false
          //   this.$router.push({ path: '/' })
          // }).catch(() => {
          //   this.loading = false
          // })
        } else {
          this.labelShow = false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg:#2d3a4b;
  $light_gray:#eee;

  /* reset element-ui css */
  .register-container {
    .el-form-item {
      margin-bottom: 22px;
    }
    .el-input {
      width: 70%;
    }
    .el-input-w {
      width: 56%;
    }
    .upload-w{
      width: 60%;
    }
    .label{
      font-size: 12px;
      color: #606266;
      margin-top: 7px;
      font-weight: normal
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #f3f3f3;
$dark_gray:#889aa4;
$light_gray:#eee;
.register-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  hr{
    border:0;
    background-color:$bg;
    height:1px;
  }
  .green-btn{
    color: #fff;
    background-color: #16b8bd;
    border-color: #16b8bd;
    width:130px;
  }
  .top{
    height: 50px;
    width: 1200px;
    line-height: 50px;
    padding-left: 35px;
    padding-top:5px;
    margin: 10px auto 0 auto;
    background-color: #fff;
  }
  .filter-item {
    width:330px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .user-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 1200px;
    padding: 35px 35px 15px 35px;
    margin: 15px auto;
    background-color: #fff;
  }

  .title {
    font-size: 18px;
    color: #000;
    margin: 0px auto 20px auto;
  }
  .code{
    text-align: center;
    background-color: #16b8bd;
    width: 133px;
    height: 34px;
    line-height: 34px;
    color: #ffff;
    display: inline-block;
    cursor: pointer;
    border: none;
    border-radius: 4px;
  }
  .count{
    text-align: center;
    background-color: #dce1e7;
    width: 133px;
    height: 34px;
    line-height: 34px;
    color: #ffff;
    display: inline-block;
    cursor: pointer;
    border: none;
  }
}
</style>
